<!-- 框选查询 -->
<script setup>
import { toRefs, ref, watch } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElButton, ElIcon, ElTable, ElTableColumn } from 'element-plus';
import * as turf from '@turf/turf';
import { exportExcel } from '@/common/common-helper';
import { downloadBinaryFile } from '@/utils/helper';

const props = defineProps({
  resultFeatures: Object,
  polygonShow: Boolean,
  coverAnalysis: Object,
});
const { resultFeatures, polygonShow, coverAnalysis } = toRefs(props);
const emit = defineEmits(['CloseQueryResultShow']);
const columns = ref([]);
const dataSource = ref([]);
const areaAll = ref('');

watch(
  resultFeatures,
  (val) => {
    if (Object.keys(val).length) {
      ~val?.features?.[0]?.geometry?.type.search(/polygon/i)
        ? (areaAll.value = parseFloat(turf.area(val) * 0.0015).toFixed(2))
        : '';
    }

    columns.value = val.features?.[0]?.properties.tableLabel;

    dataSource.value = val?.features?.map((item) => ({
      ...item.properties.table,
    }));
  },
  { deep: true },
);

const handleCloseModule = () => {
  emit('CloseQueryResultShow');
};

const exportDataEvent = async (type) => {
  if (type == 1) {
    let columnsVal = [];

    columns.value.map((item) => {
      const info = {};

      info['title'] = item;
      info['dataIndex'] = item;

      columnsVal.push(info);
    });

    await exportExcel(columnsVal, [], dataSource.value, '占地分析');
  } else {
    downloadBinaryFile(coverAnalysis.value.data, coverAnalysis.value.headers['content-type'], '占地分析Shp数据');
  }
};
</script>
<template>
  <div v-if="polygonShow" class="att_point1_root">
    <header>
      <span class="title">占地分析 (共{{ dataSource.length || 0 }}个要素,总面积为{{ areaAll || 0 }} 亩)</span>

      <div class="right_header">
        <ElButton type="primary" @click="exportDataEvent(1)">导出表格数据</ElButton>
        <ElButton type="primary" @click="exportDataEvent(2)">导出Shp数据</ElButton>

        <ElIcon class="root_icon_close" @click="handleCloseModule">
          <CloseBold />
        </ElIcon>
      </div>
    </header>

    <main>
      <div class="main_table">
        <ElTable
          :data="dataSource"
          :header-cell-style="{
            color: '#FFFFFF',
            background: '#FFFFFF',
          }"
          class="table_border"
        >
          <ElTableColumn
            v-for="(item, index) in columns"
            :key="index"
            :prop="item"
            :label="item"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div class="content_style img_style" :title="scope.row[item]">{{ scope.row[item] }}</div>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.att_point1_root {
  position: fixed;
  right: 5px;
  bottom: 1px;
  left: 5px;
  z-index: 9999;
  height: 286px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);
  transition: bottom 1.5s;

  header {
    display: flex;
    justify-content: space-between;
    height: 47px;
    padding: 10px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(232, 231, 229, 0.5);
    .title {
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1px;
    }

    .right_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .root_icon_close {
      width: 29px;
      height: 29px;
      margin-left: 20px;
      color: #ffffff;
      font-size: 20px;
      cursor: pointer;
      :hover {
        color: #387dfb;
      }
    }
  }

  main {
    .main_table {
      .table_border {
        width: 100%;
        height: 250px;
        border-radius: 4px;
      }
      :deep(.el-table) {
        --el-table-row-hover-bg-color: none;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__empty-text) {
        color: #ffffff !important;
      }

      :deep(.el-table th.el-table__cell) {
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table tr) {
        color: #fff;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__header tr) {
        background: rgba(192, 191, 191, 0.2) !important;
      }
    }
  }
}
</style>
